<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	// render以外的挂载阶段的钩子函数只会执行一次！
	class App extends React.Component{
		
		constructor() {
			super();
			this.h3Ref = React.createRef();
			console.log("1-constructor");
		}
		// 该钩子函数即将被废弃。
		UNSAFE_componentWillMount(){
			// 即将挂载
			console.log("2-componentWillMount",document.querySelector("h3"),this.h3Ref.current);// null null
		}
		render(){
			// 指定挂载内容
			console.log("3-render",document.querySelector("h3"),this.h3Ref.current);// null null
			return (
				<div>
					<h3 ref={this.h3Ref}>App</h3>
				</div>
			)
		}
		componentDidMount(){
			console.log("4-componentDidMount",document.querySelector("h3").innerText,this.h3Ref.current.innerText);
		}
	}
	root.render(<App/>)
</script>
</html>